<template>
  <div class="div1">
    <div class="div2">
      <span class="font_title">{{ New.title }}</span>
      <br />
      <span class="font_time">{{ Store.editTime(New.editTime) }}</span>
      <hr style="margin: 20px 0" />
    </div>
    <div class="div3">
      <img
        :src="'http://localhost:3000' + New.cover"
        class="img_title"
        alt=""
      />

      <span v-html="New.content"></span>
    </div>
    <transition name="scale">
      <el-card v-if="isShow" :class="['box-card']">
        <template #header>
          <div class="card-header">
            <span>最近新闻</span>
          </div>
        </template>
        <div
          @click="toNewsPage(item)"
          v-for="(item, index) in newsList"
          :key="index"
          class="text"
        >
          <span class="cardfont_title">{{ item.title }}</span
          ><br />
          <span class="cardfont_time">{{ Store.editTime(item.editTime) }}</span>
        </div>
      </el-card>
    </transition>
    <div class="box-card2">
      <el-button
        v-show="isShow"
        class="button"
        @click="isShowButton"
        type="danger"
        circle
        >隐藏</el-button
      >
      <el-button
        v-show="!isShow"
        class="button"
        type="primary"
        @click="isShowButton"
        circle
        >显示</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { getnewnewslist } from "@/request/home/userapi.js";
import { useStore } from "@/stores/counter.js";
const Route = useRoute();
const Router = useRouter();
const Store = useStore();
const New = ref();
const isShow = ref(false);
const newsList = ref();

New.value = JSON.parse(Route.query.new);
function handleScroll() {
  if (
    document.documentElement.scrollHeight -
      document.documentElement.offsetHeight -
      window.scrollY <
    0
  )
    isShow.value = true;
  else isShow.value = false;
}
function isShowButton() {
  isShow.value = !isShow.value;
}

async function getAllnew() {
  const result = await getnewnewslist(6);
  newsList.value = result.data.result;
}
onMounted(() => {
  getAllnew();
  handleScroll();
  window.addEventListener("scroll", handleScroll);
});
onBeforeUnmount(() => {
  window.removeEventListener("scroll", handleScroll);
});

const toNewsPage = (value) => {
  Router.replace({
    path: Route.path,
    query: {
      new: JSON.stringify(value),
    },
  });
  New.value = value;
};
</script>

<style scoped>
.div1 {
  height: calc(100vh - 60px);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.div2 {
  width: 95%;
}
.div3 {
  width: 95%;
}
.img_title {
  max-width: 100%;
}
.font_title {
  color: black;
  font-size: 0.6rem;
  font-weight: bolder;
  text-shadow: 0.04rem 0.04rem 0px #ddd, 0.08rem 0.08rem 0px #bbb;
  margin: 10px 0;
}
.font_time {
  font-size: 0.3rem;
  color: #7a7979;
  color: black;
}
.cardfont_title {
  margin-left: 10px;
  font-size: 0.3rem;
  font-weight: bolder;
}
.cardfont_time {
  display: flex;
  justify-content: center;
  font-size: 0.2rem;
  color: #7a7979;
  color: black;
}
.box-card {
  position: fixed;
  background: #79bbff;

  right: 3%;
  width: 3rem;
  top: 10%;
  border-radius: 16px;
  box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.3),
    inset -8px -8px 5px rgba(255, 255, 255, 0.7),
    -8px -8px 16px rgba(0, 0, 0, 0.3);
}
.box-card2 {
  position: fixed;
  right: 3%;
  top: 10%;
}

.button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 0.4rem;
  height: 0.4rem;
}
.scale-enter-active {
  animation: in 1s;
}
.scale-leave-active {
  animation: in 1s reverse;
}
.text {
  margin: 15px 0;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 8px 8px 5px rgba(0, 0, 0, 0.3),
    inset -8px -8px 5px rgba(255, 255, 255, 0.7),
    -8px -8px 16px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.text:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  transform: translateY(-8px) scale(1.01, 1.01);
}
@keyframes in {
  0% {
    height: 0;
    width: 0;
    opacity: 0;
  }
  100% {
    width: 3rem;
    opacity: 1;
  }
}
@media (max-width: 1000px) {
  .button {
    width: 0.6rem;
    height: 0.6rem;
  }
  .box-card {
    width: 4rem;
  }
  @keyframes in {
    0% {
      height: 0;
      width: 0;
      opacity: 0;
    }
    100% {
      width: 4rem;
      opacity: 1;
    }
  }
}

@media (max-width: 450px) {
  .button {
    width: 0.9rem;
    height: 0.9rem;
  }
  .box-card {
    width: 60%;
  }
  @keyframes in {
    0% {
      height: 0;
      width: 0;
      opacity: 0;
    }
    100% {
      width: 60%;
      opacity: 1;
    }
  }
}
</style>